import './userlist.scss'
import React,{useEffect,useState} from 'react';
import axios from 'axios'
import { Table, Divider, Pagination} from 'antd';
export default function Userlist() {
  const [tablelist, settablelist] = useState([]);
  const [usersCount, setusersCount] = useState(''); 

  const itemRender = (_, type, originalElement) => {
    if (type === 'prev') {
      return <a>Previous</a>;
    }
    if (type === 'next') {
      return <a>Next</a>;
    }
    return originalElement;
  };
      useEffect(()=>{
        axios.get(`https://elm.cangdu.org/v1/users/list?offset=${0}&limit=${20}`).then(res=>{
          console.log(res.data);
          if(res.data){
            settablelist(res.data)
          }
        })
        axios.get(`https://elm.cangdu.org/v1/users/count`).then(res=>{
              setusersCount(res.data.count)
        })
      },[false])
      function  onChange(params) {
        console.log(params);
        var a = params*20
        console.log(a);
        axios.get(`https://elm.cangdu.org/v1/users/list?offset=${a}&limit=${20}`).then(res=>{
          console.log(res.data);
          if(res.data){
            settablelist(res.data)
          }
      })
      }
    return(
        <div id="userlist">
            {/* user */}
            <table border={'1'} cellSpacing="0" cellPadding='0' align="center">
              <thead>
                <tr>
                  <th>#</th>
                  <th>注册日期</th>
                  <th>用户姓名</th>
                  <th>注册地址</th>
                </tr>
              </thead>
              <tbody>
              {
                tablelist.map((A,index)=>{
                  return(
                    <tr key={index}>
                      <td>{index+1}</td>
                      <td>{A.registe_time}</td>
                      <td>{A.username}</td>
                      <td>{A.city}</td>
                    </tr>
                  )
                })
              }
              </tbody>
            </table>
            <div>
              共{usersCount}条<Pagination total={usersCount} onChange={onChange}/>
            </div>
        </div>
    )
}